<!-- payError 支付失败 -->
<template>
  <view class="payError">
    <img class="img" src="@/static/img/icon_warring.png" alt="" />
    <view class="t1 tc">交易失败</view>
    <view class="title mb10">[{{ code }}]非常遗憾的告诉您：</view>
    <view class="content">
      <view v-if="msg">{{ msg }}</view>
      <template v-else>
        <view
          >交易失败了，系统已自动为您退款（如有扣款），
          给您造成的不便敬请谅解！</view
        >
        <view>
          24小时内仍未收到退款的，可拨打<span
            class="tel"
            @click="callPhone(tel)"
            >{{ tel }}</span
          >
          官方客服电话进行人工退款，感谢您的支持与理解！
        </view>
      </template>
    </view>
  </view>
</template>

<script>
  // import mixin from './mixin'
  // import { callPhone } from '@/utils/sdk'
  // import * as auth from '@/utils/auth.js'
  export default {
    name: 'PayError',
    // mixins: [mixin],
    data() {
      return {
        code: '100100',
        tel: '',
        query: {}
      }
    },
    computed: {
      msg() {
        const { msg } = this.query
        return msg ? decodeURIComponent(msg) : ''
      }
    },
    // beforeRouteLeave(to, from, next) {
    //   const toPath = to.path
    //   const noRedirect = ['/index/home']
    //   if (noRedirect.includes(toPath)) {
    //     next()
    //   } else {
    //     this.$router.replace('/index/home')
    //   }
    // },
    onLoad(options) {
      this.query = options
      this.tel = this.$auth.getServiceTel()
      // this.init()
    },
    methods: {
      // 初始化方法
      init() {
        // this.routerPush()
      },
      callPhone(tel) {
        this.$tools.callTelephone(tel)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .payError {
    height: 100%;
    background: #fff;
    padding-top: 50rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    padding-right: 30rpx;
    padding-left: 30rpx;

    .t1 {
      font-size: 36rpx;
      font-weight: bold;
      color: $red;
      margin-top: 30rpx;
      margin-bottom: 30rpx;
    }

    .img {
      width: 130rpx;
      height: 130rpx;
      display: block;
      margin: 0 auto;
    }

    .title {
      font-size: 30rpx;
      font-weight: bold;
    }

    .content {
      line-height: 46rpx;
      .tel {
        color: rgb(23, 162, 243);
      }
    }
  }
</style>
